<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style>
body{
	margin: 0px auto;
	padding-top: 120px;
	padding-left: 30%;
}
dl dd div{
	font-size:12px;
}
dt,dd{
	float:left;
	margin:0px;
	border:0px;
	padding:0px;
}
dl{
	clear:both;
	line-height: 22px;
}
dt{
	width:110px;
	text-align:right;
	font-size:14px;
	height:30px;
	line-height:25px;
}
dd{
	font-size:12px;
	color:#666666;
	height:30px;
	line-height:30px;
	vertical-align:middle;
	padding-left:10px;
}
.ext{
	height: 50px;
}
</style>

</head>
<body>
  <form action="${pageContext.request.contextPath}/UpdateSaveServlet" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="id" value="${user.id}" />
    <dl>
     <dt>账号：</dt>
     <dd><input placeholder="请输入账号" id="loginName" name="loginName" value="${user.loginName}"  /></dd>
     <dd>请输入账号</dd>
    </dl>
    <dl>
     <dt>真实名字：</dt>
     <dd><input placeholder="请输入真实姓名" value="${user.userName}" name="userName" /></dd>
     <dd>请输入真实名字</dd>
    </dl>
     <dl>
     <dt>性别：</dt>
     <dd><input type="radio"   <c:if test="${user.sex==1}">checked="checked"</c:if>  name="sex" value="1" />男<input type="radio"  <c:if test="${user.sex!=1}">checked="checked"</c:if> name="sex" value="0" />女</dd>
     <dd>请选择性别</dd>
    </dl>
    <dl>
     <dt>图片上传：</dt>
     <dd><input type="file" name="picOne" id="picOne" /></dd>
     <dd id="showPreview">
     <img onerror="setDef(this)" src="/img/${user.headPic}" height="150px" id="imgShow" />
     </dd>
     <dd>
     <span id="sp"></span>
     </dd>
     </dl>
      <dl>     <dt></dt>     <dd><input type="submit" value="修改用户" /></dd>     <dd><input type="reset" /></dd>
    </dl>
  </form>
   <script>
   function setDef(e) {
	 	 e.src ="${pageContext.request.contextPath}/images/df.jpg";
		}
   
    window.onload=function (){
		document.getElementById("picOne").onchange = function() {//当chooseImage的值改变时，执行此函数
			var rootUrl="${pageContext.request.contextPath}/";
			var url = rootUrl+"images/df.jpg";
			var ext = this.value.substring(this.value.lastIndexOf(".")).toLowerCase();
			if (ext != '.png' && ext != '.jpg' && ext != '.jpeg'&& ext != '.gif') {
				this.value="";
				document.getElementById("sp").innerHTML="<font color='red'><b>请选择图片类型的文件再上传。</b></font>";
			} else {
				document.getElementById("sp").innerHTML="";
				var file = this.files[0];
				url = window.URL.createObjectURL(file); //转成可以在本地预览的图片对象并获取地址
			}
			//显示预览
			document.getElementById("imgShow").setAttribute("src", url);
		}
	}
	</script>
</body>
</html>